<template>
  <el-dialog title="选择其他模型" v-model="open" width="1000px" @open="initOpen" append-to-body :before-close="close"
    @close="close">
    <div class="detailItem">
      <el-form :inline="true" :model="queryParams" ref="queryRef" label-width="120px">
        <el-form-item label="模型名称：" prop="modelName">
          <el-input v-model="queryParams.modelName" placeholder="请输入模型名称" clearable />
        </el-form-item>
        <el-form-item label="省" prop="province">
          <el-select v-model="queryParams.province" placeholder="请选择省" @change="chooseProvince" clearable>
            <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-select v-model="queryParams.city" placeholder="请选择市" clearable>
            <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button plain @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="modelList" :border="true" stripe>
        <el-table-column label="序号" type="index" align="center" width="60" />
        <el-table-column label="模型名称" align="center" prop="modelName" />
        <el-table-column label="适用地区" align="center">
          <el-table-column label="省" align="center" prop="province" />
          <el-table-column label="市" align="center" prop="city" />
        </el-table-column>
        <el-table-column label="是否默认" align="center" prop="isDefault">
          <template #default="{row}">
            {{row.isDefault=='0'?'否':'是'}}
          </template>
        </el-table-column>
        <el-table-column label="维护人" align="center" prop="createUserName" />
        <el-table-column label="维护人所属单位" align="center" prop="orgName" />
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-link type="primary" :underline="false" @click="updateModel(row.id)">选择</el-link>
          </template>
        </el-table-column>
      </el-table>
      <pagination style="margin-top: 15px" v-show="total > 0" :total="total" v-model:page="queryParams.page"
          v-model:limit="queryParams.rows" @pagination="getAllModelFunc" />
    </div>
  </el-dialog>
</template>
<script setup>
import { useMajorProjectStore } from '@/store/modules/majorProject'
import { getAllModel, selectModel } from '@/api/earthquakeLossesEstimation/earthquakeSetting'
const props = defineProps({
  open: Boolean,
  id: String,
  type: String
})
const emits = defineEmits(['update:open'])
const data = reactive({
  queryParams: {
    taskId: '',
    modelName: '',
    province: '',
    city: '',
    page: 1,
    rows: 10,
    type: props.type
  },
  total: 0,
  modelList: [],
  cityData: []
})
const {queryParams, total, modelList, cityData} = toRefs(data)
const route = useRoute()
const { taskId, taskType } = route.query
const {proxy} = getCurrentInstance()
// 省、市、区/县
const majorProject = useMajorProjectStore()
const { provinceData } = storeToRefs(majorProject)
const { getProvinceData, getCityData } = majorProject

const initOpen = () => {
  getProvinceData();
  getAllModelFunc()
}
const chooseProvince = async (value) => {
  queryParams.value.city = null;
  cityData.value = [];
  cityData.value = await getCityData(value)
}
const getAllModelFunc = () => {
  queryParams.value.taskId = taskId
  queryParams.value.type = props.type
  modelList.value = []
  getAllModel(queryParams.value).then(res => {
    if(res.code == 200) {
      modelList.value = res.data.rows
      total.value = res.data.total
    }
  })
}

const close = () => {
  emits('update:open', false)
  proxy.resetForm('queryRef')
}
// 查询
const handleQuery = () => {
  queryParams.value.page = 1
  getAllModelFunc()
}
// 重置
const resetQuery = () => {
  proxy.resetForm("queryRef");
  getAllModelFunc()
}
// 选择
let modelData = inject('modelData')
const updateModel = (id) => {
  selectModel(taskId, id, props.type).then(res => {
    if(res.code == 200) {
      switch(props.type){
        case '1':
          modelData.intensityData = res.data
          break
        case '2':
          modelData.casualtiesData = res.data
          break
        case '3':
          modelData.economicData = res.data
          break
        case '4':
          modelData.resettlementData = res.data
          break
        case '5':
          modelData.rescueforceData = res.data
          break
        case '6':
          modelData.materialData = res.data
          break
      }
      close()
    }
  })
}
</script>
<style scoped lang="scss">
.detailItem{
  padding: 20px 0 0;
}
</style>